@use "sass:color";
@use "../../variables.scss";

.Select {
  position: relative;
  width: 100%;
  background: #ffffff;
  border: 1px solid variables.$border-color;
  border-radius: 4px;
  font-size: 14px;
  color: variables.$text-color-primary;
  line-height: normal;
  outline: none;
  height: 32px;

  cursor: pointer;

  &.has-error,
  &.has-error:focus,
  &.has-error:active {
    border-color: var(--error-color);
  }
}
.Select.no-selection {
  color: variables.$text-color-body-copy;
}
.Select.is-disabled {
  &.has-error {
    border-color: var(--error-color);
  }
  cursor: not-allowed;
  background-color: #f8f8f8;
  border-color: color.adjust(variables.$border-color, $lightness: 30%);
  color: variables.$text-color-accent;
}
